.index{
	height: 100%;
	width: 100%;
	.top {
		height: 60px;
		background-color: #2b3244;
  		box-shadow: 2px 0 10px 0 #cbced4;
  		position: relative;
  		z-index: 2;
  		.logo {
  			height: 100%;
  			margin-left: 20px;
  			.logo-img{
  				height: 100%;
  			}
  		}
		.topCenterBox {
			width:450px;
			margin: 0 auto;
			height: 60px;
			.top_item {
				width:150px;
				height: 56px;
				line-height: 56px;
				text-align:center;
				color: #ffffff;
				cursor: pointer;
				border-bottom: 4px solid #2b3244;
				.drop-down-box {
					display: none;
					margin-top: 4px;
					background-color: #373e4f;

					.drop-down-item {
						color: #ffffff;
						line-height: 60px;	
						height: 60px;
						border-bottom: 1px solid #5c626b;
						
						&:hover{
							background-color: #6c7282;
						}
					}
				    .active_class{
				    	position: relative;
				    	&:before{
				    		position: absolute;
					    	content:"";
					    	width: 10px;
					    	height: 10px;
					    	border-radius: 10px;
					    	display: block;
					    	left: 17px;
					    	top: 26px;
							background-color: red;
						}
				    }
					.drop-down-item:last-child{
						border-bottom:none;
					}
				}
				&:hover{
					.drop-down-box {
						display: block;
					}
				}
			}
			.top_item_active_class {
				background-color: #373e4f;
				border-color: #ff0048;
			}
		}
		.user {
			position: absolute;
			right: 15px;
			top:0;
			height: 100%;
			width: 150px;
			color: #fff;
			cursor: pointer;
			&:hover{
				.useRight {
					.icon-shangla {
						display: block;
					}
					.icon-xiala {
						display: none;
					}
				}
				.logoOutBox {
					display: block;
				}
			}
			.userLeft {
				width: 80px;
				padding: 10px 5px 0 0;
				box-sizing:border-box;
				p {
					height: 20px;
					line-height: 20px;
					text-align: right;
					font-size: 14px;
				}
			}
			.userIcon {
				height: 100%;
				width:50px;
				i {
					font-size: 36px;
				}
			}
			.useRight {
				height: 100%;
				width: 20px;
				.icon-shangla {
					display: none;
				}
				.icon-xiala {
					display: block;
				}
			}
			.logoOutBox {
				display: none;
				width: 200px;
				right: 0;
				top:60px;
				background-color: #fff;
				box-shadow: 0 0 10px 0 #babcc0;
				position: absolute;
				// height: 100px;
				p {
					text-align: center;
					color: #444444;
					font-size: 18px;
					margin: 15px 0;
				}
				.btn {
					text-align: center;
					width: 100px;
					height: 30px;
					line-height: 30px;
					color: #fff;
					cursor: pointer;
					border-radius: 15px;
					background-color: #ff0048;
					box-shadow: 0 2px 4px 0 rgba(255, 0, 72, 0.5);
					margin: 18px auto;
					i {
						margin-right: 3px;
					}
				}
			}
		}
	}
	.router-view-box {
		height: 100%;
		width: 100%;
	}
}